<template>
	<div class="">
		<el-form :inline="true" :model="searchFormData" class="demo-form-inline">
			<el-form-item label="权限名称">
				<el-input size="small" v-model="searchFormData.menuName" placeholder="请输入权限名称"></el-input>
			</el-form-item>
			<el-form-item label="权限类型">
				<el-select v-model="searchFormData.menuType" placeholder="请选择" clearable>
				    <el-option label="目录" value="M"/>
				    <el-option label="菜单" value="C"/>
				    <el-option label="按钮" value="F"/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="reset" size="small">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search" size="small">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="showAddDialog">添加权限</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="batchRemove">批量删除</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-table ref="refMenusTable" size="mini" row-key="menuId" highlight-current-row default-expand-all 
				:data="tableData" :header-cell-style="{ background: '#FAFAFA', textAlign: 'center' }"
				:cell-style="{ textAlign: 'center' }"  max-height="580"
				@select="rowSelect" @selection-change="selectionChange" @select-all="selectAll">
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="menuName" label="权限名称"> </el-table-column>
				<el-table-column prop="component" label="标识"> </el-table-column>
				<el-table-column prop="menuType" label="类型"> </el-table-column>
				<el-table-column prop="path" label="URL"> </el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="remove(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<!-- 添加权限dialog -->
		<el-dialog title="添加权限" :visible.sync="adddialogVisible" width="50%">
			<div>
				<el-table ref="refMenusTable2" size="small" row-key="menuId" highlight-current-row default-expand-all
					:data="tableData2" :header-cell-style="{ background: '#FAFAFA', textAlign: 'center' }"
					:cell-style="{ textAlign: 'center' }" 
					@select="rowSelect2" @selection-change="selectionChange2" @select-all="selectAll2">
					<el-table-column type="selection" width="55"> </el-table-column>
					<el-table-column prop="menuName" label="权限名称"> </el-table-column>
					<el-table-column prop="component" label="标识"> </el-table-column>
					<el-table-column prop="menuType" label="类型"> </el-table-column>
					<el-table-column prop="path" label="URL"> </el-table-column>
				</el-table>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="adddialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="accredit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		components: {},
		props: {
			'activeRoleId': Number | String
		},
		data() {
			return {
				adddialogVisible: false,
				tableData: [],
				tableData2: [],
				selection: [], //已授权列表，选中的行
				selection2: [], //添加授权列表，选中的行
				searchFormData: {
					menuName: '',  //权限名称
					menuType: '', //权限类型
				},
				isSelectedAll: false ,//已授权列表是否全选
				isSelectedAll2: false //添加授权列表是否全选
			}
		},
		created() {

		},
		methods: {
			accredit() {
				this.$http({
					url: '/api/tenant/roleMenu',
					method: 'POST',
					data: {
						'menuIds': this.selection2.map(item=>item.menuId),
						'roleId': this.activeRoleId
					}
				}).then(res => {
					console.log(res);
					this.adddialogVisible = false;
					this.loadTableData();
				})
			},
			reset() {
				this.searchFormData = {
					name: '',
					type: ''
				}
				this.loadTableData()
			},
			loadTableData() { //查询已拥有权限
				this.$http({
					url: '/api/tenant/roleMenu/list',
					method: 'POST',
					data: {
						...this.searchFormData,
						'roleId': this.activeRoleId
					}
				}).then(res => {
					this.tableData = res.data.data;
				})
			},
			rowSelect(selection, row) {
				this.$nextTick(()=>{
					if(selection.indexOf(row) > -1) { // 若勾选
						this.checkParent(row) //向上同步
						this.checkChildren(row) //向下同步
					} else { // 若取消,则向下同步
						this.uncheckChildren(row)
					}
				})
			},
			checkParent(row) {
				let parentRow = this.tableData.find(item=>{ //找到父亲
					return item.menuId == row.parentId
				});
				if(parentRow) { //若父亲存在
					this.$refs.refMenusTable.toggleRowSelection(parentRow, true); //选中它
					this.checkParent(parentRow) //继续向上找父亲
				}
			},
			checkChildren(row) {
				let children = row.children;
				if(children && children.length>0) {
					children.forEach(item=>{
						this.$refs.refMenusTable.toggleRowSelection(item, true); //选中它
						this.checkChildren(item); //递归选中
					})
				}
			},
			uncheckChildren(row){
				let children = row.children;
				if(children && children.length>0) {
					children.forEach(item=>{
						this.$refs.refMenusTable.toggleRowSelection(item, false); //取消它
						this.uncheckChildren(item); //递归取消
					})
				}
			},
			selectionChange(selection) {
				this.selection = selection;
			},
			selectAll(selection) {
				//全选 或 全不选
				this.isSelectedAll = !this.isSelectedAll;
				if(this.isSelectedAll) {
					selection.forEach(row=>{
						this.checkChildren(row);
					})
				} else {
					this.tableData.forEach(row=>{
						this.uncheckChildren(row); 
					})
				}
				console.log(selection);
			},
			loadTableData2() { //查询未拥有权限
				this.$http({
					url: '/api/tenant/roleMenu/unAddedMenuList',
					method: 'POST',
					data: {
						'roleId': this.activeRoleId
					}
				}).then(res => {
					this.tableData2 = res.data.data;
				})
			},
			rowSelect2(selection, row) {
				console.warn(selection, row);
				this.$nextTick(()=>{
					if(selection.indexOf(row) > -1) { // 若勾选
						this.checkParent2(row) //向上同步
						this.checkChildren2(row) //向下同步
					} else { // 若取消,则向下同步
						this.uncheckChildren2(row)
					}
				})
			},
			checkParent2(row) {
				let parentRow = this.tableData2.find(item=>{ //找到父亲
					return item.menuId == row.parentId
				});
				if(parentRow) { //若父亲存在
					this.$refs.refMenusTable2.toggleRowSelection(parentRow, true); //选中它
					this.checkParent2(parentRow) //继续向上找父亲
				}
			},
			checkChildren2(row) {
				let children = row.children;
				if(children && children.length>0) {
					children.forEach(child=>{
						this.$refs.refMenusTable2.toggleRowSelection(child, true); //选中它
						this.checkChildren2(child); //递归选中
					})
				}
			},
			uncheckChildren2(row){
				let children = row.children;
				if(children && children.length>0) {
					children.forEach(child=>{
						this.$refs.refMenusTable2.toggleRowSelection(child, false); //取消它
						this.uncheckChildren2(child); //递归取消
					})
				}
			},
			selectionChange2(selection) {
				this.$nextTick(()=>{
					console.log(selection);
					this.selection2 = selection;
				})
			},
			selectAll2(selection) {
				//全选 或 全不选
				this.isSelectedAll2 = !this.isSelectedAll2;
				if(this.isSelectedAll2) {
					selection.forEach(row=>{
						this.checkChildren2(row);
					})
				} else {
					this.tableData2.forEach(row=>{
						this.uncheckChildren2(row); 
					})
				}
			},
			search() {
				this.loadTableData()
			},
			showAddDialog(){
				this.adddialogVisible = true;
				this.loadTableData2()
			},
			remove(row) {
				this.delete(row.roleMenuId)
			},
			batchRemove() {
				let ids = this.selection.map(item=>item.roleMenuId).join(",")
				this.delete(ids)
			},
			delete(ids) {
				this.$confirm('此操作将删除该权限，是否继续?', '提示', { type: 'warning'})
				.then(() => {
					this.$http({
						url: `/api/tenant/roleMenu/remove/${ids}`,
						method: 'GET'
					}).then(res => {
						console.log(res);
						if(res.data.code == 200) {
							this.loadTableData()
						} else {
							this.$message.error(res.data.msg);
						}
					})
				}).catch(()=>{
					this.$message.info('删除取消')
				})
			}
		},
		watch: {
			activeRoleId(newVal) {
				this.loadTableData();
			}
		}
	}
</script>
<style lang='scss' scoped>
</style>
